<template>
	<div class="CityHeader">
		<div class="header-top">
			<div class="header-left" @click="toHome">
				<span class="iconfont">&#xe624;</span>
			</div>
			<div class="header-title">
				城市选择
			</div>
		</div>
		<div class="header-bottom">
			<ul>
				<li class="active">境内</li>
				<li>境外·港澳台</li>
			</ul>
		</div>
	</div>
	
</template>

<script>
export default{
	methods:{
		toHome(){
			this.$router.push("./")
		}
	}
}
	
	
</script>

<style lang="stylus">
@import "../../../assets/css/var.styl";	
     .CityHeader{
     	width: 100%;
     	background: $bgColor;
     } 
	.CityHeader .header-top{
		height: .44rem;
		font-size: .14rem;
		display: flex;
		align-items: center;
	}
	.header-top .header-left{
		width: .4rem;
		text-align: center;
		color: #FFFFFF;
	}
	.header-top .header-title{
		flex: 1;
		height: .3rem;
		line-height: .3rem;
		color: #FFFFFF;
		text-align: center;
		margin-left: -0.4rem;
		font-size: .16rem;
	}
	.header-bottom{
		font-size: .14rem;
		height: .3rem;
		line-height: .3rem;
		clear: both;
		overflow: hidden;
	}
	
	.header-bottom ul{
		display: flex;
		justify-content: center;
	}
	.header-bottom ul li{
		width: 30%;
		height: .2rem;
		line-height: .2rem;
		border: 1px solid #FFFFFF;
		float: left;
		text-align: center;
	    color: #FFFFFF;
	   
	}
	.header-bottom ul li.active{
		background-color: #FFFFFF;
		color:$bgColor ;
	   
	}
	
</style>